<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Todo-list</title>
    <link rel="stylesheet" href="https://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/666.css">
</head>

<body>
    <div id="app">
        <div class="page-group">
            <div class="page page-current">
                <!-- header -- start  -->
                <header class="bar bar-nav">
                    <a class="icon icon-star pull-left"></a>
                    <a class="icon icon-edit pull-right" @click='inputFlag=!inputFlag'></a>
                    <h1 class="title"> Todo List </h1>
                </header>
                <!-- header -->

                <!-- content -->
                <div class="content">

                    <div class="input-box" v-if='inputFlag'>
                        <textarea id='jfh-text' v-model='addItem'></textarea>
                        <button id='jfh-button' class="button button-success" @click='add' onclick="fn()" ref='button'>确定</button>
                    </div>

                    <div class="card" v-for='(item,index) in newTodos' :key='item.id'>
                        <div class="card-content">
                            <div class="card-content-inner">
                                <p>{{item.content}}</p>
                                <div class="button-box"><button class="button button-success" @click='item.f=!item.f' v-bind:class='[item.f?"button-fill":""]'><span class="icon icon-check"></span></button>
                                    <button class="button button-danger" @click='check(index)'><span class="icon icon-remove"></span></button></div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- content -->


                <!-- mask -->
                <!-- <div class="mask-box" v-show='maskFlag'> -->
                <div class="mask-box" v-show="maskFlag" @click='maskFlag=false'>
                    <div class="mask-bg"></div>
                    <div class="mask-content">
                        <p>您确定删除吗？</p>
                        <button class="button button-primary button-fill pull-right" @click='confirm(activeIndex) '>确定</button>
                    </div>
                </div>
                <!-- mask -->

                <!-- footer -->
                <ul class="footer-box">
                    <li v-for='tabBar in tabBars' :key='tabBar.id' class="bur" :class='["bur-"+tabBar.style,type==tabBar.text?"bur-fill":""]' @click='type=tabBar.text'>{{tabBar.text}}</li>
                </ul>
                <!-- footer -->

            </div>
        </div>
    </div>


</body>
<script src="./js/vue.js"></script>
<script src="./js/index.js"></script>

</html>